<template>
    <div>
        <div class='container'>
            <div class='handle-box'>
                17版基本类型：
                <el-select v-model='query.baseType' placeholder='17版基本类型' style='width: 300px' clearable
                           class='handle-select mr10'>
                    <el-option v-for='s in selectBaseTypeSource' :key='s' :label='s' :value='s'></el-option>
                </el-select>
                乡镇：
                <el-select v-model='query.villagesAndTowns' placeholder='乡镇' style='width: 300px' clearable
                           class='handle-select mr10'>
                    <el-option v-for='s in selectVillagesAndTownsSource' :key='s' :label='s' :value='s'></el-option>
                </el-select>
                <el-button type='primary' icon='el-icon-search' @click='handleClick()'>搜索</el-button>
                <el-button type='primary' icon='el-icon-refresh-left' @click='handleReset()'>重置</el-button>
            </div>

            <div style='margin-top: 50px'>
                <el-row :gutter='20'>
                    <el-col :span='12'>
                        <div ref='main' style='width: 600px; height: 600px'></div>
                    </el-col>
                    <el-col :span='12'>
                        <div ref='main2' style='width: 600px; height: 600px'></div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'showScoreChars',
    components: {},
    data() {
        return {
            query: {
                villagesAndTowns: '',
                baseType: ''
            },
            //选择框选项值
            selectVillagesAndTownsSource: [],
            selectBaseTypeSource: []
        };
    },
    //初始化函数
    mounted() {
        this.drawChart();
        this.initSelect();
    },
    methods: {
        handleClick(){
            this.drawChart();
        },
        handleReset(){
            this.query.baseType='';
            this.query.villagesAndTowns='';
            this.drawChart();
        },
        //初始化下拉框
        initSelect() {
            this.$http.get('/basicserver/hsb/selectDistinctBaseType').then(res => {
                if (res.data.status) {
                    this.selectBaseTypeSource = res.data.data;
                }
            });
            this.$http.get('/basicserver/hsb/selectDistinctVillagesAndTowns').then(res => {
                if (res.data.status) {
                    this.selectVillagesAndTownsSource = res.data.data;
                }
            });
        },
        //初始化图标
        drawChart: function() {
            this.$http.post('/basicserver/hsb/showScoreLevelChars', this.query).then(res => {
                if (res.data.status) {
                    let xAxisData = new Array();
                    let seriesData = new Array();
                    let pieData=new Array();
                    for (const item of res.data.data) {
                        xAxisData.push(item['name']);
                        seriesData.push(item['num']);
                        let obj=new Object();
                        obj.value=item['num']
                        obj.name=item['name']
                        pieData.push(obj);
                    }
                    this.buildBarChar(xAxisData, new Array().push('评分等级'), seriesData, '评分等级', '自评等级分布柱状图');
                    this.buildPieChar(pieData, '自评等级分布柱状图');
                }
            });
        },
        buildBarChar(xAxisData, legendData, seriesData, seriesName, title) {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(this.$refs['main']);
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: title
                },
                tooltip: {},
                legend: {
                    data: legendData
                },
                xAxis: {
                    data: xAxisData
                },
                yAxis: {},
                series: [
                    {
                        name: seriesName,
                        type: 'bar',
                        data: seriesData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        buildPieChar(data,title) {

            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(this.$refs['main2']);
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: title,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.yellow {
    color: #E6A23C;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
